<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水逆退散局 - 首页</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="../assets/css/tailwind.css">
</head>
<body class="bg-gray-100">
  <div class="phone-frame mx-auto">
    <!-- 状态栏 -->
    <div class="status-bar">
      <span>20:30</span>
      <div class="flex space-x-2">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <!-- 微信小程序顶部导航 -->
    <div class="wechat-header">
      <span>水逆退散局</span>
    </div>
    
    <!-- 主内容区域 -->
    <div class="app-content p-4 bg-gray-50">
      <!-- 顶部卡片 -->
      <div class="rounded-lg bg-white shadow-md p-5 mb-6">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
            <i class="fas fa-moon text-purple-600 text-xl"></i>
          </div>
          <div>
            <h2 class="text-lg font-bold">今日运势测算</h2>
            <p class="text-gray-500 text-sm">解析水逆期的个人运势</p>
          </div>
        </div>
        <p class="text-sm text-gray-600 mb-2">请输入您的出生日期，我们将为您分析今日运势</p>
      </div>
      
      <!-- 日期选择表单 -->
      <div class="bg-white rounded-lg shadow-md p-5 mb-6">
        <div class="mb-5">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="birthdate">
            出生日期
          </label>
          <input class="appearance-none border border-gray-300 rounded-md w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-purple-500" id="birthdate" type="date">
        </div>
        
        <div class="mb-5">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="birthtime">
            出生时辰 (可选)
          </label>
          <select class="appearance-none border border-gray-300 rounded-md w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-purple-500" id="birthtime">
            <option value="">请选择</option>
            <option value="1">子时 (23:00-1:00)</option>
            <option value="2">丑时 (1:00-3:00)</option>
            <option value="3">寅时 (3:00-5:00)</option>
            <option value="4">卯时 (5:00-7:00)</option>
            <option value="5">辰时 (7:00-9:00)</option>
            <option value="6">巳时 (9:00-11:00)</option>
            <option value="7">午时 (11:00-13:00)</option>
            <option value="8">未时 (13:00-15:00)</option>
            <option value="9">申时 (15:00-17:00)</option>
            <option value="10">酉时 (17:00-19:00)</option>
            <option value="11">戌时 (19:00-21:00)</option>
            <option value="12">亥时 (21:00-23:00)</option>
          </select>
        </div>
        
        <a href="result.html" class="block w-full bg-gradient-to-r from-purple-600 to-blue-500 text-white font-bold py-3 px-4 rounded-md text-center shadow-lg hover:from-purple-700 hover:to-blue-600 transition duration-300">
          测算今日运势
        </a>
      </div>
      
      <!-- 功能介绍 -->
      <div class="bg-white rounded-lg shadow-md p-5 mb-20">
        <h3 class="font-bold text-gray-800 mb-3">功能介绍</h3>
        <div class="space-y-3">
          <div class="flex items-center">
            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
              <i class="fas fa-star text-blue-500"></i>
            </div>
            <p class="text-sm text-gray-600">基于八字理论分析当日运势</p>
          </div>
          <div class="flex items-center">
            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
              <i class="fas fa-chart-line text-green-500"></i>
            </div>
            <p class="text-sm text-gray-600">多维度解读事业、财运、健康等</p>
          </div>
          <div class="flex items-center">
            <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
              <i class="fas fa-lightbulb text-yellow-500"></i>
            </div>
            <p class="text-sm text-gray-600">提供应对建议，水逆不慌张</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="fixed bottom-0 left-0 right-0 h-14 bg-white border-t border-gray-200 flex justify-around items-center" style="width: 374px;">
      <a href="home.html" class="flex flex-col items-center">
        <i class="fas fa-home text-xl text-blue-500"></i>
        <span class="text-xs mt-1 text-blue-500">首页</span>
      </a>
      <a href="#" class="flex flex-col items-center">
        <i class="fas fa-history text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">历史</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center">
        <i class="fas fa-user text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">我的</span>
      </a>
    </div>
  </div>
</body>
</html> 